<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item
        class="swipe-item"
        v-for="(image, index) in swiper"
        :key="index"
      >
        <img class="swipe-img" :src="image['image_src']" />
      </van-swipe-item>
    </van-swipe>

    <!-- 导航菜单 -->
    <van-grid :border="false" :icon-size="74">
      <van-grid-item
        v-for="(item, index) in Catitems"
        :icon="item['image_src']"
        :key="index"
        :to="{ name: 'category' }"
      />
    </van-grid>

    <!-- 楼层 -->
    <div class="index_floor">
      <div
        class="floor_group"
        v-for="(value, key, index) in floordata"
        :key="index"
      >
        <div class="floor_title">
          <img :src="value.floor_title.image_src" alt="" />
        </div>
        <div class="floor_list">
          <div v-for="(value, key, index) in value.product_list" :key="index">
            <img :src="value.image_src" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getHomeSwiperdata,
  getHomeCatitems,
  getHomefloordata,
} from "../network/home.js";
export default {
  name: "Home",
  data() {
    return {
      swiper: null,
      Catitems: null,
      floordata: null,
    };
  },
  created() {
    getHomeSwiperdata().then((res) => {
      this.swiper = res.message;
    });
    getHomeCatitems().then((res) => {
      this.Catitems = res.message;
    });
    getHomefloordata().then((res) => {
      this.floordata = res.message;
    });
  },
};
</script>

<style scoped lang="scss">
.swipe-img {
  width: 100%;
}
.index_floor {
  .floor_group {
    .floor_title {
      padding: 1vw 0;
      img {
        width: 100%;
      }
    }
  }
  .floor_list {
    overflow: hidden;
    div {
      float: left;
      width: 33.33%;
      &:nth-last-child(-n + 4) {
        height: calc(33.33vw * 386 / 232 / 2);
        padding-left: 1vw;
      }
      &:nth-child(2),
      &:nth-child(3) {
        padding-bottom: 1vw;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
